<template>
  <view class="form-page">
    <!-- 修改用户信息表单 -->
    <up-form ref="userForm" :model="form" :rules="rules">
      <!-- 头像 -->
      <up-form-item
          label=""
          prop="avatar"
          borderBottom
          ref="itemAvatar">
        <view class="avatar-field">
          <image class="avatar" :src="proxy.$tool.getResources(form.avatar)"></image>
          <button class="text-button"
                  type="default" open-type="chooseAvatar"
                  @chooseavatar="chooseavatar">点击上传头像
          </button>
        </view>
      </up-form-item>
      <!-- 用户姓名 -->
      <up-form-item
          label="姓名"
          prop="name"
          borderBottom
          ref="itemName">
        <input
            type="nickname"
            @change="setName"
            v-model="form.name"
            placeholder="请输入用户姓名"
            maxlength="10"
            class="form-input"
        ></input>
      </up-form-item>
      <!-- 提交按钮 -->
      <view class="submit-button">
        <up-button type="primary" @click="validateForm()">保存信息</up-button>
      </view>
    </up-form>
  </view>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue'
import {useStore} from "vuex";

const {proxy} = getCurrentInstance();
const store = useStore();
const form = ref(JSON.parse(JSON.stringify(store.state.userInfo)));

const rules = ref({
  avatar: [
    {required: true, message: "用户头像不能为空", trigger: ['blur', 'change']},
  ],
  name: [
    {required: true, message: "用户姓名不能为空", trigger: ['blur', 'change']},
    {maxLength: 10, message: "用户姓名不能超过10个字", trigger: ['blur', 'change']},
  ],
  phone: [
    {required: true, message: "电话号码不能为空", trigger: ['blur', 'change'],},
    {pattern: /^\d{11}$/, message: "电话号码必须是11位", trigger: ['blur', 'change'],},
  ],
  sex: [
    {required: true, message: "性别不能为空", trigger: ['blur', 'change'],}
  ],
});

/**
 * 获取头像
 * @param e
 */
const chooseavatar = (e) => {
  //待上传到服务器
  proxy.$request.uploadFile("/common/uploadFile", e.detail.avatarUrl).then(res => {
    form.value.avatar = res.data;
  })
}


/**
 * 设置姓名
 * @param name
 */
const setName = function (e) {
  form.value.name = e.target.value
}


// 使用 ref 创建响应式引用
const userForm = ref(null);

// 表单校验和提交
const validateForm = () => {
  userForm.value.validate().then(valid => {
    if (valid) {
      proxy.$request.put("/sys-user/updateInfoByMe", form.value).then(res => {
        store.commit("setUserInfo", form.value); // 更新用户信息、
        uni.setStorageSync("userInfo", form.value);      // 更新token信息
        uni.navigateBack({
          delta: 1,
        });
      }).catch(err => {
        uni.$u.toast(err)
      })
    } else {
      //校验失败
    }
  }).catch(() => {
    //校验失败
  });
};


</script>

<style scoped lang="scss">
.form-page {
  padding: 10px;
}

.avatar-field {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-text {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.form-input {
  width: 95%;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  background-color: #f9f9f9;
}

.gender-group {
  display: flex;
  gap: 20px;
}

.submit-button {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.text-button {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0 10px;
  margin: 0;
  color: #333; /* 设置文本颜色 */
  font-size: 14px; /* 设置字体大小 */
}

.text-button:active {
  opacity: 0.6; /* 点击时的效果 */
}
</style>
